 <template>
 	<view class="finance_container" :data-theme="theme">
 		<!-- 头部账单信息 -->
 		<view class="finance_header">
 			<!-- 消息提示 -->
 			<view class="alert">
 				<!-- <u-alert type="error" :description="financeDescription"></u-alert> -->
 				<uni-notice-bar single color="#f56c6c" background-color="#fef0f0" :text="financeDescription" />
 			</view>
 			<!-- 今日账单卡片 -->
 			<view class="finance_header_card" @click="goFinanceDetail(dayBillObject)">
 				<view class="finance_header_card_top">
 					<view class="header_card_top">
 						<view class="header_card_top_left">
 							{{dayBillObject.dataDate ? dayBillObject.dataDate : '-'}}生成账单
 						</view>
 						<!-- <view class="header_card_top_right">
 							已打款
 						</view> -->
 					</view>
 					<!-- <view class="header_card_center">
 						<view>￥{{dayBillObject.currentDayBalance}}</view>
 						<u-icon name="question-circle"></u-icon>
 					</view> -->
 					<!-- <view class="header_card_bottom">
 						2023.11.22打款完成
 					</view> -->
 				</view>
 				<view class="finance_header_card_bottom">
 					<view class="header_card_bottom_content">
 						<view class="content_top">
 							{{ billIndex == 0 ?  '当日结余' : '当月结余'}}
 						</view>
 						<view class="content_bottom">
 							￥{{dayBillObject.currentDayBalance ? formatAmount(dayBillObject.currentDayBalance) : '0.00' }}
 						</view>
 					</view>
 					<view class="header_card_bottom_content">
 						<view class="content_top">
 							订单应收金额
 						</view>
 						<view class="content_bottom">
 							￥{{dayBillObject.orderReceivable ? formatAmount(dayBillObject.orderReceivable) : '0.00'}}
 						</view>
 					</view>
 					<view class="header_card_bottom_content">
 						<view class="content_top">
 							订单应退金额
 						</view>
 						<view class="content_bottom">
 							￥{{dayBillObject.orderRefundable ?  formatAmount(dayBillObject.orderRefundable)  : '0.00'}}
 						</view>
 					</view>
 				</view>
 			</view>
 			<!-- 选择日期 -->
 			<view class="option_date">
 				<view class="option_date_top">
 					<!-- <u-tabs :list="billDateList" @click="billClick" lineColor="#fe5c2d"></u-tabs> -->
 					<tab-bar style="background-color: #FFF;" :tabList="billDateList" :tabIndex.sync="innterIndex"
 						@change="tabsClick"></tab-bar>
 				</view>
 				<uni-datetime-picker v-model="range" type="daterange" @change="financeConfirm" :color="bgColor">
 					<view class="option_date_bottom" @click="dayShow = true" v-show="dayOrMonth">
 						<view>{{billDate.beginTime}}</view>
 						<view>至</view>
 						<view>{{billDate.endTime }}</view>
 					</view>
 				</uni-datetime-picker>


 				<!-- <u-calendar v-model="dayValue" :show="dayShow" mode="range" :min-date='calendar.minDate'
 					:max-date="calendar.maxDate" :monthNum="calendar.monthNum" @confirm="financeConfirm"
 					color='#fe5c2d' closeOnClickOverlay @close="financeClose" @cancel="financeCancel"></u-calendar> -->
 			</view>

 		</view>
 		<!-- 账单列表 -->
 		<scroll-view scroll-y @scrolltolower="bottomLodingHandle" class="finance_list">
 			<view class="finance_item" v-for="item in billList" @click="goFinanceDetail(item)">
 				<view class="item_top">
 					<view>
 						{{item.dataDate ? item.dataDate : '-' }}{{ billIndex == 0 ?  '当日结余' : '当月结余'}}
 					</view>
 					<view>
 						￥{{item.currentDayBalance ? formatAmount(item.currentDayBalance)   : '0.00'}} >
 					</view>
 				</view>
 				<view class="item_bottom">
 					<view>订单应收金额：￥{{item.orderReceivable ?  formatAmount(item.orderReceivable)  : '0.00'}}</view>
 					<view>订单应退金额：￥{{item.orderRefundable ?  formatAmount(item.orderRefundable)  : '0.00'}}</view>
 				</view>
 			</view>
 			<u-empty v-if="!billList.length" style="padding-top:  50%;"
 				icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
 			<uni-load-more v-else :status="moreStatus"></uni-load-more>

 		</scroll-view>
 	</view>

 	</view>
 </template>

 <script>
 	import tabBar from '@/components/tab-bar/tab-bar.vue';
 	import {
 		setThemeColor
 	} from '../../../utils/setTheme'
 	import {
 		getDayListApi,
 		getMonthListApi
 	} from "@/api/finance.js"
 	let app = getApp()
 	export default {
 		components: {
 			tabBar,
 		},
 		data() {
 			return {
 				bgColor: "#fff",
 				theme: app.globalData.theme,
 				financeDescription: '订单配送完成的次日系统生成账单',
 				// 账单日期
 				billDateList: [{
 						name: '日账单',
 						value: 'day'
 					},
 					{
 						name: '月账单',
 						value: 'month'
 					},
 				],
 				innterIndex: 0,
 				billIndex: '',
 				// 日账单
 				dayBill: {
 					beginTime: '',
 					endTime: '',
 				},
 				// 月账单
 				monthBill: {
 					beginTime: '',
 					endTime: '',
 				},
 				dayOrMonth: true,
 				// 日期的时间
 				billDate: {
 					beginTime: '开始日期',
 					endTime: '结束日期',
 				},
 				// 开启日期选择
 				dayShow: false,
 				//历史时间
 				calendar: {
 					minDate: '',
 					maxDate: '',
 					monthNum: 13,
 				},
 				// 时间值
 				dayValue: '',
 				// 获取日账单的params参数
 				dayBillParams: {
 					page: 1,
 					limit: 10,
 					dateLimit: '',
 				},
 				// 获取月账单的params参数
 				monthBillParams: {
 					page: 1,
 					limit: 10,
 					dateLimit: '',
 				},
 				// 账单信息
 				dayBillObject: {},
 				billList: [],

 				// 刷新数据的状态
 				moreStatus: 'more',
 				range: [], //日期

 			}
 		},
 		created() {
 			this.getDate()
 		},
 		onLoad() {
 			this.bgColor = setThemeColor()
 			uni.setNavigationBarColor({
 				frontColor: '#ffffff',
 				backgroundColor: this.bgColor,
 			})
 			this.getDayList()
 		},
 		methods: {
 			// 金额保留小数点后两位
 			formatAmount(amount) {
 				// 判断是否包含小数点
 				if (amount.toString().indexOf('.') === -1) {
 					// 如果不包含小数点，则添加“.00”
 					return amount + '.00';
 				} else {
 					// 如果包含小数点，则直接返回
 					return amount;
 				}
 			},
 			// 获取时间的功能函数
 			getDate() {
 				let today = new Date();
 				let previousDate = new Date();
 				previousDate.setFullYear(today.getFullYear() - 1)
 				// 格式去年日期
 				let year1 = today.getFullYear();
 				let month1 = String(today.getMonth() + 1).padStart(2, '0');
 				let day1 = String(today.getDate()).padStart(2, '0');
 				// 格式今年日期
 				let year2 = previousDate.getFullYear();
 				let month2 = String(previousDate.getMonth() + 1).padStart(2, '0');
 				let day2 = String(previousDate.getDate()).padStart(2, '0');

 				this.calendar.maxDate = year1 + '-' + month1 + '-' + day1;
 				this.calendar.minDate = year2 + '-' + month2 + '-' + day2;
 				// 日账单时间
 				this.dayBill.beginTime = year2 + '-' + month2 + '-' + day2;
 				this.dayBill.endTime = year1 + '-' + month1 + '-' + day1;
 				// 月账单时间
 				this.monthBill.beginTime = year2 + '-' + month2
 				this.monthBill.endTime = year1 + '-' + month1


 			},
 			// 弹出时间确认日期
 			financeConfirm(e) {
 				this.dayShow = false
 				this.dayBill.beginTime = e[0]
 				this.dayBill.endTime = e[e.length - 1]
 				this.billDate = this.dayBill
 				this.dayBillParams.dateLimit = e[0] + "," + e[e.length - 1]
 				this.billList = []
 				this.getDayList(true)
 			},
 			// 弹出时间取消
 			financeCancel() {},
 			// 弹出时间取消日期
 			financeClose() {
 				this.dayShow = false
 			},
 			// 选择账单日期的点击事件
 			tabsClick(e) {
 				this.billIndex = e;
 				if (e == 0) {
 					this.dayOrMonth = true
 					this.billList = []
 					this.moreStatus = 'more'
 					this.getDayList(true)
 				} else if (e == 1) {
 					this.dayOrMonth = false
 					this.billList = []
 					this.moreStatus = 'more'
 					this.getMonthList(true)
 				}

 			},



 			// 触底加载事件
 			bottomLodingHandle() {
 				if (this.moreStatus == "more") {
 					this.dayBillParams.page++
 					this.getDayList()
 				}
 			},
 			// 去详情页面
 			goFinanceDetail(item) {
 				item.billIndex = this.billIndex
 				uni.navigateTo({
 					url: `/pages/finance/financeDetail/financeDetail?accountDetails=${JSON.stringify(item)}`,

 				});
 			},
 			// 日帐单管理分页列表
 			async getDayList(status) {
 				uni.showLoading({
 					title: '加载中',
 					mask: true
 				})
 				if (status) {
 					this.dayBillParams.page = 1;
 					this.dayBillParams.limit = 10;
 				}
 				try {
 					let result = await getDayListApi(this.dayBillParams)
 					if (result.code == 200) {
 						let totalPage = result.data.totalPage
 						let items = result.data.list
 						if (items.length > 0) {

 							if (totalPage == this.dayBillParams.page) {
 								this.moreStatus = 'noMore'
 							} else {
 								this.moreStatus = 'more'
 							}
 							this.billList.push(...items)
 							this.dayBillObject = this.billList[0]

 						} else {
 							this.moreStatus = 'noMore'
 						}
 					} else {
 						uni.showToast({
 							title: result.message,
 							icon: "none",
 							duration: 1500
 						});
 					}
 					setTimeout(() => {
 						uni.hideLoading()
 					}, 300)
 				} catch (e) {
 					setTimeout(() => {
 						uni.hideLoading()
 					}, 300)
 					//TODO handle the exception
 					console.log(e)
 				}
 			},
 			// 月帐单管理分页列表
 			async getMonthList(status) {
 				uni.showLoading({
 					title: '加载中',
 					mask: true
 				})
 				if (status) {
 					this.monthBillParams.page = 1;
 					this.monthBillParams.limit = 10;
 				}
 				try {
 					this.moreStatus = 'loading'
 					let result = await getMonthListApi(this.monthBillParams)
 					if (result.code == 200) {
 						let totalPage = result.data.totalPage
 						let items = result.data.list
 						if (items.length > 0) {
 							if (totalPage == this.monthBillParams.page) {
 								this.moreStatus = 'noMore'
 							} else {
 								this.moreStatus = 'more'
 							}
 							this.billList.push(...items)
 						} else {
 							this.moreStatus = 'noMore'
 						}
 					} else {
 						uni.showToast({
 							title: result.message,
 							icon: "none",
 							duration: 1500
 						});
 					}
 					setTimeout(() => {
 						uni.hideLoading()
 					}, 300)
 				} catch (e) {
 					setTimeout(() => {
 						uni.hideLoading()
 					}, 300)
 					//TODO handle the exception
 					console.log(e)
 				}
 			},
 		}
 	}
 </script>

 <style scoped lang="scss">
 	page {
 		height: 100%;

 	}

 	.bg_color {
 		@include main_bg_color(theme);
 	}

 	.finance_container {
 		display: flex;
 		flex-direction: column;
 		height: 100%;

 		// 头部固定
 		.finance_header {

 			.finance_header_card {
 				background-color: white;
 				margin: 10px;

 				padding: 20px;
 				border-radius: 5px;

 				.finance_header_card_top {


 					.header_card_top {
 						display: flex;
 						justify-content: center;
 						align-items: center;

 						.header_card_top_left {
 							font-weight: bold;
 							font-size: 16px;
 							margin-right: 5px;
 						}

 						.header_card_top_right {
 							background-color: #a4dccb;
 							padding: 2px;
 							border-radius: 5px;
 							font-size: 12px;
 						}
 					}

 					.header_card_center {
 						display: flex;
 						justify-content: center;
 						padding: 10px 0;

 						view {
 							font-size: 30px;
 							margin-right: 5px;
 						}
 					}

 					.header_card_bottom {
 						text-align: center;
 					}
 				}

 				.finance_header_card_bottom {
 					padding: 10px;
 					display: flex;
 					justify-content: space-around;

 					.header_card_bottom_content {
 						.content_top {
 							margin-bottom: 10px;
 							opacity: 0.7;
 						}

 					}
 				}

 			}

 			.option_date_bottom {
 				padding: 20px;
 				margin: 10px;
 				border-bottom: 1px solid #eee;
 				display: flex;
 				justify-content: space-around;
 				align-items: center;
 				background-color: white;
 				border-radius: 5px;
 			}
 		}

 		// 底部内容区域
 		.finance_list {
 			flex: 1;
 			min-height: 70px;

 			.finance_item {
 				padding: 10px;
 				margin: 0 10px;
 				margin-bottom: 10px;
 				display: flex;
 				flex-direction: column;
 				justify-content: center;
 				background-color: white;
 				border-radius: 5px;
 			}

 			.item_top {
 				display: flex;
 				justify-content: space-between;
 				padding: 10px 0;
 				font-weight: bold;
 				font-size: 16px;
 			}

 			.item_bottom {
 				display: flex;

 				view {
 					margin-right: 15px;
 				}
 			}
 		}

 	}
 </style>